<template>
	<view class="content">
		<projectSelect @go='go' v-if="type === 'center'"></projectSelect>
		<userSelect v-if="showUser" :single="true" :list="userList" @cancelConfirm="closeUser" @onConfirm="onConfirm">
		</userSelect>
		<view :class="`section-0 ${type === 'center' ? 'center-section-0' : ''}`">
			<view class="section-body">
				<view class="top-tab" v-if="type !== 'center'">
					<view :class="`item ${curTab.id === item.id ? 'item__active' : ''}`" @click="setCurTab(item)"
						v-for="item in tabList" :key="item.id">
						{{item.name}}
						<view class="shape"></view>
					</view>
				</view>
				<view class="problem-container">
					<view class="title">问题
						<view class="shape"></view>
					</view>
					<view class="action" v-if="curTab.id === 1 || type === 'center'" @click="handleShowQuestion()">
						<text class="iconfont icon-jiahao"></text> 添加
					</view>
				</view>
			</view>
		</view>

		<u-popup mode="center" :show="showQuestion" @close="closeQuestionPop" :round="50">
			<view class="pop project-pop">
				<view class="title">
					<text>问题详情</text>
				</view>
				<view class="body">
					<view class="wrapper _scroll">
						<view class="section-1">
							<view class="form-item upload-wrap">
								<view class="label">现场照片</view>
								<u-upload :fileList="fileList" :previewFullImage="true" @afterRead="afterRead"
									@delete="deletePic" multiple :maxCount="6"
									:style="{position:'relative',height:fileList.length == 0 ? '44rpx' : 'unset',border: fileList.length == 0 ? 'solid 2rpx #1534ce' : 'none', borderRadius: '20rpx'}">
									<view class="iconfont icon-tupian"></view>
								</u-upload>
							</view>
							<view class="form-item">
								<view class="label">问题描述</view>
								<view class="input">
									<u--input placeholderClass="input-placeholder" class="input-body"
										placeholder="请输入问题描述" v-model="form.check_content"></u--input>
								</view>
							</view>
							<view class="form-item">
								<view class="label">问题类型</view>
								<u-radio-group v-model="form.check_type_name" @change="groupChange"
									iconPlacement="left">
									<u-radio v-for="(item, index) in radiolist" :key="index" :label="item.name"
										:name="item.name" @change="radioChange" activeColor="#1534ce" iconSize="8"
										size="12">
									</u-radio>
								</u-radio-group>
							</view>
							<view class="form-item">
								<view class="label">违章库</view>
								<view class="input" @click="showPeccancy = true">
									<u--input placeholderClass="input-placeholder" class="input-body"
										placeholder="请选择违章库" readonly v-model="form.peccancy_content"></u--input>
								</view>
							</view>
							<view class="form-item">
								<view class="label">责任人</view>
								<view class="input" @click="showUser = true">
									<u--input placeholderClass="input-placeholder" class="input-body"
										placeholder="请输入责任人" v-model="form.zrr_name"></u--input>
								</view>
							</view>
							<view class="form-item">
								<view class="label">罚款</view>
								<view class="input">
									<u--input placeholderClass="input-placeholder" class="input-body"
										placeholder="请输入罚款" v-model="form.fk_money"></u--input>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="custom-button" @click="submit">
					确认
				</view>
			</view>
		</u-popup>
		<u-popup mode="center" :show="showHistory" @close="showHistory = false" :round="50">
			<view class="pop problem-pop">
				<view class="title">
					<text>历史记录</text>
				</view>
				<view class="body">
					<mescroll-uni ref="mescrollRef" height='830' :fixed="false" @init="mescrollInit" @up="upCallback" :up="upOption"
						:down="{use: false}">
						<view class="problem-list">
							<problemItem v-for="item in historyList" :item="item"></problemItem>
							<!-- <view class="item" v-for="item in historyList">
								<view class="project">{{item.code}}.{{item.project_name}}</view>
								<view class="img">
									<image mode="aspectFill" :src="item.file_path ? item.file_path.replace(/\\/g,'/') : ''"></image>
									<view class="problem-title">{{item.check_content}}</view>
								</view>
								<view class="info">
									<view class="info-item">
										<view class="label">类型</view>
										<view class="value">{{item.check_type == 1 ? '质量问题' : '安全问题'}}</view>
									</view>
									<view class="info-item">
										<view class="label">违章库</view>
										<view class="value">{{item.peccancy_type}}</view>
									</view>
									<view class="info-item">
										<view class="label">责任人</view>
										<view class="value">{{item.zrr_name}}</view>
									</view>
									<view class="info-item">
										<view class="label">罚款</view>
										<view class="value">{{item.fk_money}}</view>
									</view>
								</view>
							</view> -->
						</view>
					</mescroll-uni>
				</view>
			</view>
		</u-popup>
		<u-popup mode="center" :show="showPeccancy" @close="closePeccancy" :round="50">
			<view class="pop user-pop">
				<view class="title">
					<text>请选择违章库</text>
				</view>
				<view class="body">
					<view class="wrapper _scroll">
						<view class="item" v-for="(item, idx) in peccancyList" :key="idx"
							@click="handleSelectPeccancy(idx)">
							<view :class="`check ${selectedPeccancy.indexOf(idx) !== -1 ? 'check__active' : ''}`">
								<view class="check-on"></view>
							</view>
							<view class="name">{{item.peccancy_content}}</view>
						</view>
					</view>
				</view>
				<view class="custom-button" @click="confirmSelectPeccancy()">
					确认（{{selectedPeccancy.length}}）
				</view>
			</view>
		</u-popup>
		<view class="problem-wrapper" v-if="type !== 'center'">
			<div style="height: 20rpx;width: 100%;"></div>
			<problemList ref="problemList" @handleSelect="handleSelect" :checkMode="true" :userName="userInfo.nick_name"
				:height="curTab.id === 1 ? 'calc(100vh - 400rpx)' : 'calc(100vh - 300rpx)'" :fixed="false"
				:noTitle="curTab.id === 1" :id="curProject.id" :type="curTab.name" :state="curTab.id === 1 ? '1' : '2'">
			</problemList>
		</view>
		<view class="problem-wrapper" v-if="type === 'center'">
			<problemList ref="problemList" @handleSelect="handleSelect" :checkMode="true" :userName="userInfo.nick_name"
				height="calc(100vh - 410rpx)" :fixed="false"
				:id="curProject.id" type="二级巡查" state="1">
			</problemList>
		</view>
		<view class="footer-space" v-if="curTab.id === 1 || type == 'center'"></view>

		<view class="footer" v-if="curTab.id === 1 || type == 'center'">
			<view class="record" @click="showHistory = true">
				<view class="iconfont icon-lishijilu_huaban"></view>
				<text>历史记录</text>
			</view>
			<view class="submits">
				<view style="background-color: #999;" class="submit" @click="handleCheck('3')">
					删除
				</view>
				<view class="submit" @click="handleCheck('2')">
					提交
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		addProject,
		getViolation,
		getProject,
		checkReferApi
	} from '@/api/patrol.js';

	import {
		mapGetters
	} from 'vuex';
	import projectSelect from '@/components/project_select/index.vue'
	import userSelect from '@/components/user_select/index.vue';
	import problemList from '@/components/problem_list/index.vue'
	import problemItem from '@/components/problem_item/index.vue'
	import { uploadUrl } from '@/baseUrl.js';
	export default {
		components: {
			problemList,
			userSelect,
			projectSelect,
			problemItem
		},
		data() {
			return {
				curTab: {
					id: 1,
					name: '业主检查'
				},
				tabList: [
					{
						name: '二级巡查',
						id: 3
					},
					{
						name: '省公司督察',
						id: 2
					},		
					{
						name: '业主检查',
						id: 1
					},
					{
						name: '监理检查',
						id: 4
					},
					{
						name: '施工巡查',
						id: 5
					},
				],
				mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
				upOption: {
					textNoMore: '-- 没有更多了 --'
				},
				pageSize: 20,
				fileList: [],
				showQuestion: false,
				radiolist: [{
						name: '质量问题',
						disabled: false
					},
					{
						name: '安全问题',
						disabled: false
					}
				],
				form: {
					check_type_name: '质量问题',
					check_content: '',
					zrr_name: '',
					fk_money: '',
					peccancy_content: '',
					peccancy_id: ''
				},
				showPeccancy: false,
				showHistory: false,
				peccancyList: [],
				historyList: [],
				selectedPeccancy: [],
				checked: false,
				userList: [],
				selectedUser: [],
				showUser: false,
				userList: [],
				selectList: [],
				type: 'manager'
			}
		},
		computed: {
			...mapGetters({
				curProject: 'system/getCurProject',
				userInfo: 'system/getUserInfo',
				curRole: 'system/getCurRole'
			})
		},
		methods: {
			go(url) {
				uni.navigateTo({
					url
				})	
			},
			handleSelect(list) {
				this.selectList = list;
			},
			handleSelectAll(e) {
				if (e) {
					this.selectedUser = this.userList.map(item => item.user_id);
				} else {
					this.selectedUser = [];
				}
			},
			handleCheck(state) {
				const _type = state;
				const check = (type) => {
					checkReferApi({
						ids: this.selectList.join(','),
						state: type,
					}).then(res => {
						if (res.data.code == 1 || res.data.code == 200) {
							uni.showToast({
								title: '操作成功',
								duration: 1000,
								icon: 'success'
							});
							uni.hideLoading();
							this.$refs.problemList.initData();
						} else {
							uni.showToast({
								title: '操作失败',
								duration: 1000,
								icon: 'error'
							});
							uni.hideLoading();
						}

					});
				}

				if (state == "3") {
					uni.showModal({
						title: '确定删除？',
						success: async (res) => {
							if (res.confirm) {
								check(_type);
							}
						}
					});
				} else {
					check(_type);
				}
			},

			setCurTab(item) {
				this.curTab = item;
			},
			closePeccancy() {
				this.showPeccancy = false;
			},

			handleSelectPeccancy(idx) {
				this.selectedPeccancy = [idx];
			},
			confirmSelectPeccancy() {
				if (!this.selectedPeccancy.length) {
					this.closePeccancy();
					return;
				}
				let item = this.peccancyList
					.filter((item, idx) => this.selectedPeccancy.indexOf(idx) !== -1)[0];
				this.form.peccancy_id = item.id
				this.form.peccancy_content = item.peccancy_content;
				this.closePeccancy();
			},
			closeUser() {
				this.showUser = false;
			},
			onConfirm(res) {
				this.closeUser();
				this.userList = res;
				let str = res
					.map(item => item.nick_name)
					.join(',');
				this.form.zrr_name = str;
			},
			handleShowQuestion() {
				this.showQuestion = true;
				// this.fetchUser();
				this.fileList = [];
				if (this.peccancyList.length === 0) {
					this.handleGetViolation();
				}
			},

			async handleGetViolation() {
				uni.showLoading({
					title: '加载中...'
				});
				const {
					data
				} = await getViolation();
				uni.hideLoading();
				if (data.code === 1) {
					this.peccancyList = data.data
				}
			},
			getHistory() {
				this.showHistory = true
			},
			/*mescroll组件初始化的回调,可获取到mescroll对象 (此处可删,mixins已默认)*/
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},

			/*上拉加载的回调*/
			async upCallback(page) {
				const {
					data
				} = await getProject({
					project_id: this.curProject.id,
					pageSize: this.pageSize,
					page: page.num,
					state: '2',
					check_source: this.curTab.name,
					user_name: this.userInfo.nick_name
				});
				if (data.code === 1 || data.code === 200) {
					// 接口返回的当前页数据列表 (数组)
					let curPageData = data.data.data;
					curPageData.forEach((item, idx) => {
						curPageData[idx].code = idx + 1 + (page.num - 1) * this.pageSize
					});
					// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
					let curPageLen = curPageData.length;
					// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
					let totalPage = data.data.last_page;
					//设置列表数据
					if (page.num == 1) this.historyList = []; //如果是第一页需手动置空列表
					this.historyList = this.historyList.concat(curPageData); //追加新数据
					// 请求成功,隐藏加载状态
					//方法一(推荐): 后台接口有返回列表的总页数 totalPage
					this.mescroll.endByPage(curPageLen, totalPage);
					setTimeout(() => {
						this.mescroll.endSuccess(curPageLen)
					}, 20)
				} else {
					//  请求失败,隐藏加载状态
					this.mescroll.endErr()
				}
			},
			groupChange(n) {
				console.log('groupChange', n);
			},
			radioChange(n) {
				console.log('radioChange', n);
			},
			// 删除图片
			deletePic(event) {
				this[`fileList`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList`].length
				lists.map((item) => {
					this[`fileList`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList`][fileListLen]
					this[`fileList`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result.data.file_id
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: uploadUrl, // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								resolve(JSON.parse(res.data))
							}, 1000)
						}
					});
				})
			},
			submit() {
				this.form.project_id = this.curProject.id
				this.form.check_type = this.form.check_type_name == '质量问题' ? 1 : 2;
				this.form.check_photo_id = this[`fileList`].length > 0 ? this[`fileList`].map(o => o.url).join(',') : ''
				this.form.check_user = this.userInfo.nick_name
				// if (![1, 2].includes(this.form.check_type)) {
				// 	uni.showToast({
				// 		title: '请选择问题类型',
				// 		duration: 1000,
				// 		icon: 'error'
				// 	});
				// 	return
				// }
				// if (this.form.fk_money == '') {
				// 	uni.showToast({
				// 		title: '请输入罚款',
				// 		duration: 1000,
				// 		icon: 'error'
				// 	});
				// 	return
				// }
				if (this.form.check_photo_id == '') {
					uni.showToast({
						title: '请上传照片',
						duration: 1000,
						icon: 'error'
					});
					return
				}
				let obj = {
					...this.form,
					check_source: this.curRole === '项目经理' ? '业主检查' : '二级巡查',
					project_name: this.curProject.project_name
				};
				
				uni.showLoading({
					title: '加载中...'
				});
				addProject({
					...obj					
				}).then(res => {
					if (res.data.code == 1 || res.data.code == 200) {
						uni.showToast({
							title: '操作成功',
							duration: 1000,
							icon: 'success'
						});
						for (let key in this.form) {
							this.form[key] = ''
						}
						this.showQuestion = false;
						this.$refs.problemList.initData();
						uni.hideLoading();
					} else {
						uni.showToast({
							title: '操作失败',
							duration: 1000,
							icon: 'error'
						});
						uni.hideLoading();
					}
				});
			},
			closeQuestionPop() {
				this.showQuestion = false
			}
		},
		onLoad(data) {
			this.type = data.type;
			if (this.type === 'center') {
				this.curTab = {
					name: '二级巡查',
					id: 3
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.actions {
		width: 100%;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 0px 25px;

		.checkbox {
			font-size: 26rpx;
			font-weight: normal;
			font-stretch: normal;
			letter-spacing: 8rpx;
			color: #333;
			width: 200rpx;
			padding-top: calc((62rpx - 18px) / 2);
		}
	}

	/deep/ {
		.u-index-list__letter__item__index {
			color: #fff !important;
		}
	}


	.user-pop {
		.body {
			padding: 40rpx 50rpx;

			.wrapper {
				width: 100%;
				height: 540rpx;
				overflow-y: auto;
				overflow-x: hidden;
			}

			.item {
				width: auto;
				height: 60rpx;
				@include clear();

				.check {
					width: 24rpx;
					height: 24rpx;
					border: solid 1rpx #000000;
					border-radius: 50%;
					float: left;
					margin-top: 16rpx;
					position: relative;

					.check-on {
						transition: 0.3s ease;
						opacity: 0;
						transform: scale(0.5);
						border-radius: 50%;
						position: absolute;
						top: 0;
						left: 0;
						right: 0;
						bottom: 0;
						margin: auto;
						width: 18rpx;
						height: 18rpx;
						background-color: #000000;
					}
				}

				.name {
					float: left;
					width: calc(100% - 24rpx - 40rpx);
					font-size: 26rpx;
					font-weight: 300;
					padding: 15rpx 0;
					font-stretch: normal;
					line-height: 30rpx;
					font-stretch: normal;
					letter-spacing: 0rpx;
					color: #000000;
					margin-left: 20rpx;
				}

				.check__active {
					.check-on {
						opacity: 1;
						transform: scale(1);
					}
				}
			}
		}
	}

	.problem-pop {
		height: 70vh;
		overflow-y: auto !important;
	}

	.section-1 {
		width: 100%;
		height: calc(100vh - 450rpx);
		border-radius: 50rpx;
		background-color: #fafbfd;
		padding-top: 50rpx;
		padding-bottom: 20rpx;
		box-shadow: 0rpx -10rpx 29rpx 8rpx rgba(#bcbcb5, 0.19);
		position: relative;
		top: 0;
	}

	.form-item {

		width: 600rpx;
		height: 48rpx;
		line-height: 48rpx;
		margin: 0 auto;
		margin-bottom: 25rpx;
		display: flex;
		align-items: center;

		&:last-child {
			margin-bottom: 34rpx;
		}

		&.upload-wrap {
			align-items: unset;
			height: unset;
			line-height: unset;
		}

		@include clear();

		.label {
			float: left;
			width: 130rpx;
			height: 48rpx;
			text-align: left;
			line-height: 44rpx;
			font-size: 26rpx;
			color: #46464a;
		}

		/deep/ .u-upload__wrap {
			// width: calc(100% - 206rpx) !important;
			width: calc(100%) !important;
			background-color: transparent;
		}

		.icon-tupian {
			position: absolute;
			right: 25rpx;
			line-height: 44rpx;
			color: #1534ce;
			font-size: 28rpx;
		}

		/deep/ .u-radio-label--left {
			margin-right: 55rpx;
		}

		/deep/ .u-radio__text {
			font-size: 26rpx !important;
			color: #46464a !important;
		}

		.input {
			float: left;
			width: calc(100% - 134rpx - 3rpx);
			border-radius: 20rpx;
			border: solid 2rpx #1534ce;

			.input-body {
				box-sizing: border-box;
				width: 100%;
				height: 44rpx;
				padding: 0 !important;
				border: none;
				padding-left: 30rpx !important;
				padding-right: 30rpx !important;
				font-size: 26rpx;
				font-weight: normal;
				font-stretch: normal;
				letter-spacing: 0rpx;
				color: rgba(0, 0, 0, 0.7);
			}

			.input-placeholder {
				font-size: 26rpx;
				font-weight: normal;
				font-stretch: normal;
				letter-spacing: 0rpx;
				color: rgba(0, 0, 0, 0.5);
			}
		}

	}

	.problem-list {

		width: 100%;

		.item {
			border-bottom: solid 2rpx #e2e7f5;
			padding: 0 35rpx;
			box-sizing: border-box;
		}

		.project {
			font-size: 26rpx;
			font-weight: normal;
			font-stretch: normal;
			line-height: 36rpx;
			letter-spacing: 0rpx;
			color: #000000;
			margin-top: 20rpx;
			margin-bottom: 10rpx;
		}

		.img {
			width: 100%;
			height: 248rpx;
			background-color: #000000;
			border-radius: 35rpx;
			position: relative;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}

			.problem-title {
				position: absolute;
				left: 0;
				bottom: 0;
				width: 100%;
				height: 65rpx;
				background-color: rgba(0, 0, 0, 0.7);
				text-align: center;
				line-height: 65rpx;
				font-size: 26rpx;
				font-weight: normal;
				font-stretch: normal;
				letter-spacing: 3rpx;
				color: #ffffff;
			}
		}

		.info {
			margin-top: 15rpx;
			margin-bottom: 30rpx;
			@include clear();

			.info-item {
				float: left;
				width: 25%;

				.label {
					height: 30rpx;
					font-family: SourceHanSansCN-Regular;
					font-size: 16rpx;
					font-weight: normal;
					font-stretch: normal;
					line-height: 30rpx;
					letter-spacing: 0rpx;
					color: #8497ac;
					margin-bottom: 3rpx;
				}

				.content {

					font-size: 26rpx;
					font-weight: bold;
					font-stretch: normal;
					line-height: 34rpx;
					letter-spacing: 0rpx;
					color: #46464a;
				}
			}
		}


	}

	.pop {
		width: 671rpx;
		padding-bottom: 40rpx;
		background-color: #fff;
		border-radius: 35rpx;
		overflow: hidden;

		.title {
			width: 100%;
			height: 96rpx;
			line-height: 96rpx;
			background-color: #1534ce;
			font-size: 42rpx;
			font-weight: normal;
			font-stretch: normal;
			letter-spacing: 4rpx;
			color: #ffffff;
			text-align: center;
		}
	}

	.footer-space {
		height: 150rpx;
	}

	.footer {
		box-shadow: 0 0 20rpx 10rpx rgba(#bcbcb5, 0.17);
		width: 100%;
		height: 150rpx;
		background-color: #ffffff;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		justify-content: space-around;
		align-items: center;

		.record {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			.icon-lishijilu_huaban {
				font-size: 43rpx;
				color: #3b3c40;
			}

			text {
				font-size: 26rpx;
				color: #3b3c40;
				margin-top: 10rpx;
			}
		}

		.submits {
			width: 430rpx;
			display: flex;
			justify-content: space-between;

			.submit {
				width: 200rpx;
				height: 83rpx;
				background-color: #1534ce;
				border-radius: 20rpx;
				letter-spacing: 10rpx;
				color: #ffffff;
				font-size: 26rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}

	}

	.content {
		background-color: #e6e6e6;
	}

	
	.section-0 {
		width: 100%;
		background: #2e5efe;
		.problem-container {
	
			border-top: 30rpx solid #e6e6e6;
			border-bottom: 2rpx solid #e6e6e6;
			@include clear();
			.action {
				float: right;
				margin-right: 56rpx;
				margin-top: 10rpx;
				text-align: center;
				width: 176rpx;
				height: 60rpx;
				background-color: #1534ce;
				border-radius: 30rpx;
				font-size: 26rpx;
				font-weight: normal;
				font-stretch: normal;
				line-height: 60rpx;
				letter-spacing: 6rpx;
				color: #ffffff;

				.iconfont {
					font-size: 26rpx;
					line-height: 60rpx;
				}
			}

			.title {
				display: inline-block;
				font-size: 26rpx;
				color: #000000;
				font-weight: bold;
				line-height: 80rpx;
				height: 80rpx;
				margin-left: 30rpx;
				position: relative;

				.shape {
					position: absolute;
					bottom: -6rpx;
					width: 100%;
					height: 8rpx;
					background-color: #1534ce;
					border-radius: 8rpx;
					transition: 0.3s ease;
				}

			}
		}

		

		.section-body {
			width: 100%;
			height: 100%;
			border-top-left-radius: 50rpx;
			border-top-right-radius: 50rpx;
			background-color: #fff;
			overflow: hidden;

			.top-tab {
				width: 670rpx;
				margin-left: 40rpx;
				height: 80rpx;
				line-height: 80rpx;
				display: flex;
				justify-content: space-between;
				box-sizing: border-box;
				padding: 0 30rpx;
				border-bottom: solid 3rpx #f2f2f0;

				.item {
					font-size: 26rpx;
					font-weight: normal;
					font-stretch: normal;
					line-height: 80rpx;
					letter-spacing: 0rpx;
					color: #d8d8d5;
					position: relative;

					.shape {
						opacity: 0;
						transform: translateY(6rpx);
						position: absolute;
						bottom: -6rpx;
						width: 100%;
						height: 8rpx;
						background-color: #1534ce;
						border-radius: 8rpx;
						transition: 0.3s ease;
					}
				}

				.item__active {
					color: #3b3c40;

					.shape {
						opacity: 1;
						transform: translateY(0rpx);
					}
				}
			}
		}

	}
	.center-section-0 {
		background-color: #1332cd;
		.problem-container{
			border-top: 0;
		}
	}
</style>
